<style>
.shop-container{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.top-container{
	margin-bottom: 4px;
	align-items: center;
	box-sizing: border-box;
	/* height: 50px;
	display: flex;
	flex: 1; */
}
.clearinput{
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #efeff4;
	box-sizing: border-box;
}
.with-fun{
	flex: 1;
	padding: 0 15%;
}
.with-fun .uni-icon{
	margin-right: 14px;
	font-size: 46upx;
}
.search{
	font-size: 28upx;
}
.goods-box{
	display: flex;
	position: absolute;
	top:400upx;
    /* top: 0; */
    bottom: 0;
	left: 0;
    right: 0;
}
.menu-list{
	list-style: none;
	margin: 0;
	padding: 0;
	/* padding-top: 40upx; */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 16upx;
	flex: 0 0 180upx;
	width: 180upx;
	background: #f3f5f7;
	position: relative;
}
.menu-item{
	padding: 14px 15px;
	text-align: center;
	border-bottom: 0.5px solid #ccc;
	font-size: 28upx;
	color: #555;
	background: #ededed;
}
.menu-item.active{
	background: #fff;
	color: orange;
    border-left: 10upx solid orange;
}
.goods-list{
	/* padding: 44upx 20upx 20upx 20upx; */
	padding: 24upx 20upx 20upx 20upx;
	flex: 1;
	overflow-y: scroll;
	flex-wrap: wrap;
}
.goods-item{
	display: inline-block;
    /* width: 33.333%; */
	/* width: 180upx; */
	width: 174upx;
	text-align: center;
	float: left;
}
.goods-img{
  /* height: 0;
  padding-bottom: 80%;	 */
}
.goods-item .goods-img image{
	width: 85%;
	height: 160upx;
}
.goods-title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	height: 50upx;
	line-height: 50upx;
	padding: 0 4upx;
}
.nodata{
	margin-top: 30upx;
	text-align: center;
}
.nodata image{
	width: 240upx;
	height: 280upx;
}
</style>
<template>
	<view class="shop-container">
		<!-- <view class="top-container">
			<view class="uni-form-item uni-column clearinput">
				<view class="with-fun">
					<input class="uni-input" placeholder="输入搜索名称" v-model="inputValue" />
					<view class="uni-icon uni-icon-clear"  v-if="inputValue" @click="clearValue"></view>
				</view>
			</view>
		</view> -->
		<!-- 轮播图 -->
		<swiper class="swiper" v-if="bannerList.length>0" :indicator-dots="true" :circular="true" :autoplay="true" :interval="4000" :duration="200">
			<swiper-item class="swiper-img" v-for="(item,index) in bannerList" :key="index">
				<view  class="swiper-item" @click="toUrl(item)">
					<image :src="item.img"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goods-box">
			<view class="menu-list">
				<scroll-view scroll-y scroll-with-animation style="position: absolute;top: 0upx;bottom: 0;">
					<view class="menu-item" :class="{'active':activeIndex==index}" @click="changeIndex(index)" v-for="(item,index) in category" :key="index">{{item.name}}</view>
					<!-- <view class="menu-item" @click="changeIndex(index)" v-for="(item,index) in list" :key="index">{{item.category}}</view> -->
					<!-- <view class="menu-item">类型二</view>
					<view class="menu-item">类型三</view> -->
				</scroll-view>
				
			</view>
			<view class="goods-list">
				<view v-if="clist.length==0" class="nodata">
					<image src="../../static/img/nodata.png" mode=""></image>
				</view>
				<view class="goods-item" @click="toGoodsInfo(item)" v-for="(item,index) in clist" :key="index">
					<view class="goods-img">
						<image :src="item.pic" mode="aspectFit" ></image>
					</view>
					<view class="goods-title">{{item.name}}</view>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue:'',
				activeIndex:0,
				list:[
					{
						category:'零食',
						categoryList:[
							{  img:'../../static/img/lingshi.png', name:'零食',id:'1'  },
							{  img:'../../static/img/xiaochi.png', name:'小吃',id:'2'  },
							{  img:'../../static/img/xican.png', name:'西餐',id:'3'  },
							{  img:'../../static/img/zhongcan.png', name:'中餐',id:'4'  },
						]
					},
					{
						category:'小吃',
						categoryList:[
							{  img:'../../static/img/lingshi.png', name:'零食',id:'5'  },
							{  img:'../../static/img/lingshi.png', name:'零食',id:'6'  },
							{  img:'../../static/img/xican.png', name:'西餐' ,id:'7' },
							{  img:'../../static/img/zhongcan.png', name:'中餐',id:'8'  },
						]
					},
					{
						category:'西餐',
						categoryList:[
							{  img:'../../static/img/xican.png', name:'西餐',id:'9'  },
							{  img:'../../static/img/xican.png', name:'西餐' ,id:'10' },
							{  img:'../../static/img/xican.png', name:'西餐' ,id:'11' },
							{  img:'../../static/img/zhongcan.png', name:'中餐' ,id:'12' },
						]
					},
					{
						category:'中餐',
						categoryList:[
							{  img:'../../static/img/zhongcan.png', name:'中餐' ,id:'13' },
							{  img:'../../static/img/zhongcan.png', name:'中餐' ,id:'14' },
							{  img:'../../static/img/xican.png', name:'西餐' ,id:'15' },
							{  img:'../../static/img/zhongcan.png', name:'中餐' ,id:'16' },
						]
					}
				],
				category:[
				   {
						 id:1,
						 name:111
					 },
					 {
					 	id:1,
					 	name:111
					 }
				],
				clist:[],
				bannerList:[]
			};
		},
		computed:{
			activeCategory(){
				return this.list[this.activeIndex]
			}
		},
		onLoad(){
			this.getCategory()
			this.getBanner()
		},
		methods:{
			clearValue(){
				this.inputValue = ''
			},
			onSearch(e){
				
			},
			onCancel(e){
				
			},
			toUrl(item){
				if(item.type == 3){
					uni.navigateTo({
						url:'../storeList/storeDetail/storeDetail?bid='+item.busId
					})
				}else if(item.type == 4){
					uni.navigateTo({
						url:'../shop/shopGoods/shopGoods?gid='+item.busId
					})
				}else if(item.type == 0){
					plus.runtime.openURL(item.busId)
				}
				
			},
			getBanner(){
				let that = this
				uni.request({
					url: this.httpUrl + 'banner/listByCondition',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						module: 4
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.bannerList = res.data.data
							// that.goodsList.push(...res.data.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getCategory(){
				let that = this
				uni.request({
					url: this.httpUrl + 'type/listByCondition',
					// url: 'http://39.104.168.208:9200/type/listByCondition',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						category: 3,
						status: 1
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.category = res.data.data
							that.changeIndex(0)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			changeIndex(index){
				this.activeIndex = index
				let id = this.category[index].id
				let that = this
				uni.request({
					url: this.httpUrl + 'goods/listByCondition',
					// url: 'http://39.104.168.208:9200/type/listByCondition',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						typeid: id
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.clist = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			toGoodsInfo(item){
				let gid = item.gid
				uni.navigateTo({
					url: 'shopGoods/shopGoods?gid='+gid
				})
			}
		}
	}
</script>
